Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    extClass: {
      type: String,
      value: ''
    },
    title: {
      type: String,
      value: ''
    },
    background: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: ''
    },
    back: {
      type: Boolean,
      value: true
    },
    loading: {
      type: Boolean,
      value: false
    },
    homeButton: {
      type: Boolean,
      value: false,
    },
    animated: {
      // 显示隐藏的时候opacity动画效果
      type: Boolean,
      value: true
    },
    show: {
      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
      type: Boolean,
      value: true,
      observer: '_showChange'
    },
    // back为true的时候，返回的页面深度
    delta: {
      type: Number,
      value: 1
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    displayStyle: '',
    ios: true,
    isAndroid: false,
    androidNavHeight: 0,
    statusBarHeight: 0
  },
  lifetimes: {
    attached() {
      this._setNavBarStyle();
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 设置导航栏样式
    _setNavBarStyle() {
      try {
        // 获取菜单按钮位置信息
        const rect = wx.getMenuButtonBoundingClientRect();
        
        // 获取系统信息
        wx.getSystemInfo({
          success: (res) => {
            const isAndroid = res.platform === 'android';
            const isDevtools = res.platform === 'devtools';
            const statusBarHeight = res.statusBarHeight || 0;
            
            // 计算导航栏高度
            // iOS使用44px加上安全区域，Android使用48px加上状态栏高度
            const navBarHeight = isAndroid ? 48 + statusBarHeight : 44;
            
            // 设置样式变量
            const rootStyle = `--status-bar-height: ${statusBarHeight}px; --android-height: 48px;`;
            
            // 记录平台信息
            this.setData({
              ios: !isAndroid,
              isAndroid: isAndroid,
              rootStyle: rootStyle,
              statusBarHeight: statusBarHeight,
              androidNavHeight: navBarHeight,
              innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
              leftWidth: `width: ${res.windowWidth - rect.left}px`,
              // 使用不同的方式计算安全区域
              safeAreaTop: isDevtools ? 
                `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : 
                isAndroid ? 
                `height: ${navBarHeight}px; padding-top: ${statusBarHeight}px` :
                ``
            });
            
            // 针对Android平台的调整
            if (isAndroid) {
              this._adjustForAndroid(res, rect, statusBarHeight);
            }
            
            console.log("导航栏配置:", {
              isAndroid,
              statusBarHeight,
              navBarHeight,
              safeAreaTop: this.data.safeAreaTop
            });
          }
        });
      } catch (e) {
        console.error('获取系统信息失败', e);
      }
    },
    
    _showChange(show) {
      const animated = this.data.animated
      let displayStyle = ''
      if (animated) {
        displayStyle = `opacity: ${
          show ? '1' : '0'
        };transition:opacity 0.5s;`
      } else {
        displayStyle = `display: ${show ? '' : 'none'}`
      }
      this.setData({
        displayStyle
      })
    },
    
    /**
     * 针对Android平台的特殊调整
     */
    _adjustForAndroid(sysInfo, menuButtonRect, statusBarHeight) {
      // 计算标题居中显示
      const centerStyle = `transform: translateZ(0); position: absolute; left: 70px; right: 70px; text-align: center;`;
      
      // 设置额外的安全区域调整
      const additionalStyle = {
        centerStyle: centerStyle,
        // 确保导航栏的内部高度包含状态栏
        navigationHeight: `${statusBarHeight + 48}px`
      };
      
      // 可以根据不同的Android系统版本添加特定的样式修复
      if (sysInfo.system && sysInfo.system.toLowerCase().includes('android')) {
        console.log('Android系统版本:', sysInfo.system);
        // 针对不同Android版本可能需要特定调整
        if (sysInfo.system.match(/android\s+(\d+)/i)) {
          const androidVersion = parseInt(RegExp.$1);
          console.log('Android版本号:', androidVersion);
          
          if (androidVersion >= 10) {
            // Android 10+可能需要特殊处理
            additionalStyle.specialFix = true;
          }
        }
      }
      
      this.setData(additionalStyle);
    },
    
    back() {
      const data = this.data
      if (data.delta) {
        wx.navigateBack({
          delta: data.delta
        })
      }
      this.triggerEvent('back', { delta: data.delta }, {})
    },
    
    home() {
      wx.switchTab({
        url: '/pages/index/index',
        fail: () => {
          wx.navigateTo({
            url: '/pages/index/index',
          })
        }
      })
      this.triggerEvent('home', {}, {})
    }
  },
})
